
import tpl from './index.html'

export default {
    // 加载模板文件
    template: tpl,
    // 加载子模板
    afterCreate: function(){
        this.partial('cardTpl', this.get('cardTpl'))
        this.partial('tableTpl', this.get('tableTpl'))
    },
    // 接受外部数据及默认值
    propTypes: {
        // 数据接口地址
        url: {
            type: 'object',
            value: {}
        },
        // 默认查询条件-每次查询都会带着
        defaultParam: {
            type: 'object',
            value: {
                sortBy: 'updataTime',
                orderBy: 'desc',
                pageSize: '20'
            }
        },
        // 是否为单选，默认是多选
        selectSingle: {
            type: 'boolean',
            value: false
        },
        // 视图类型，默认1为列表，2为卡片
        viewType: {
            type: 'numeric',
            value: 2
        },
        // 翻页类型，默认1为经典，2为无限翻页
        pageType: {
            type: 'numeric',
            value: 1
        },
        // 翻页mini样式
        pageMini: {
            type: 'boolean',
            value: false
        },
        // 列表模式列配置
        tableCols: {
            type: 'array',
            value: []
        },
        // 卡片模式卡片模板
        cardTpl: {
            type: 'string',
            value: '<div class=\'item\'>{{index}}default cardTpl<div>'
        },
        // 列表模式操作项模板
        tableTpl: {
            type: 'string',
            value: ''
        },
        // 方法
        methods: {
            type: 'object',
            value: {}
        },
        // 事件回调
        events: {
            type: 'object',
            value: {}
        },
        // 双击预留事件
        onDblClick: {
            type: 'function',
            value: function(){
                console.log('默认双击事件，请从外部传入onDblClick')
            }
        } 
    },
    data: function(){
        return {
            // 状态
            states: {
                // 当前页码，默认是0
                curPage: 0
            },
            // 用于存放人工搜索条件
            param: {},
            // 对象数据
            gridData: {
                total: 0,
                rows: []
            }
        }
    },
    methods: {
        msg:function(msg){
            layer.msg(msg);
        },
        // 获取数据主方法，获取前做好校验，获取成功才修改相关数据，避免不成功也改了一堆东西
        // @page：必须指定获取的页码，不传则获取第一页
        getData:function(page){
            var self = this;
            var thisPage = page;
            // 超出页码范围则退出
            if(thisPage > self.get('gridData.totalPage') || thisPage < 1){
                self.msg('超出页码范围了哦！');
                return false;
            }
            if(thisPage == self.get('states.curPage')){
                //同一页你想干嘛?
                return false;
            }
            // 组装本次查询条件
            // 将非人工搜索的条件追加到param中去
            Yox.object.each(self.get('defaultParam'), function(value, key){
                // 遇到跟人工查询条件冲突的，优先用人工的
                if(!self.get('param.'+key)){
                    self.set('param.' + key, value);
                }
            })
            // 追加本次执行需要获取的页码
            self.set('param.' + 'page', thisPage);
            
            // 开始使用最新的param获取数据
            layer.load();
            $.ajax({
                type: 'get',
                url: self.get('url.list'),
                data: self.get('param'),
                success:function(res){
                    if(res.success || !res.code){
                        // 获取最新的条数并设置
                        self.set('gridData.total', res.data.total);
                        // 根据最新的条数，和每页数量，设置新的总页数
                        var totalPage = parseInt(res.data.total / self.get('defaultParam.pageSize'));
                        if(res.data.total % self.get('defaultParam.pageSize') > 0){
                            totalPage++;
                        }
                        self.set('gridData.totalPage', totalPage);
                        // 为了实现全选批量操作，给每一条数据加一个checked字段
                        for(var i=0; i<res.data.rows.length; i++){
                            res.data.rows[i].checked = false;
                        }
                        // 根据page值判断是全新获取还是累计获取
                        if(thisPage <= 1 || self.get('pageType') == 1){
                            // 如果这次是获取第一页，或者翻页类型是经典翻页的时候，就直接替换原数据
                            self.set('gridData.rows', res.data.rows);
                        }else {
                            // 追加数据前先拿到目前已有数据的条数，作为最新一条的index
                            var newIndex = self.get('gridData.rows.length');
                            // 无限翻页，遍历新数据，逐条追加到现有数据中
                            for(var i=0; i<res.data.rows.length; i++){
                                self.append('gridData.rows', res.data.rows[i]);
                            }
                            // 滚动到最新数据第一条所在的位置
                            setTimeout(function() {
                                var offset = $('.listWrap .item').eq(newIndex).position().top - 40;
                                $(".listWrap").animate({
                                    scrollTop: offset
                                }, 300)
                                self.resize();
                            }, 300);
                        }
                        // 成功获取到数据时，更新curPage
                        self.set('states.curPage', thisPage);
                        layer.msg('成功获取'+ res.data.rows.length +'条数据!', {icon: 1})
                    }else {
                        layer.msg('远程返回错误信息：'+res.msg, {icon: 2})
                    }
                },
                error:function(){
                    layer.msg('接口地址错误或连接异常');
                },
                complete:function(){
                    layer.closeAll('loading');
                }
            })
        },
        // 所有搜索统一传递搜索参数调用该方法
        search:function(param){
            if(!param) return false;
            var self = this;
            // 清空当前查询条件
            self.set('states.curPage', 0);
            self.set('param', {});
            // 将传入的查询条件追加到param中
            Yox.object.each(param, function(value, key){
                self.set('param.' + key, value)
            })
            // 开始获取数据第一页
            self.getData(1);
            return false;
        },
        // 经典翻页-上一页
        pagePrev: function(){
            var self = this;
            var page = self.get('states.curPage') - 1
            self.getData(page);
        },
        // 经典翻页-下一页
        pageNext: function(){
            var self = this;
            var page = self.get('states.curPage') + 1
            self.getData(page);
        },
        // 选中记录 
        select: function(index){
            var self = this;
            var selectSingle  = self.get('selectSingle');
            if(selectSingle){
                // 如果点击的这条记录已经被选中了，理解为双击，执行外部传入的双击事件
                if(self.get('gridData.rows.'+index+'.checked')){
                    self.get('onDblClick')();
                    return false;
                }
                self.set('allChecked', false);
                self.set('gridData.rows.'+index+'.checked', true);
            }else {
                self.toggle('gridData.rows.'+index+'.checked');
            }
            
        },
        trOver: function(index){
            var self = this;
            // 获取鼠标经过行的数据
            var item = self.get('gridData.rows.'+index);
            // 改变hoverID
            self.set('hoverID', item.id);
            // 获取当前行的坐标
            var curPos = $('.tableBody .tableList tbody tr').eq(index).offset();
            $('.tableBody .ctrl').css('top', curPos.top -49)
        },
        tableOut: function(){
            $('.tableBody .ctrl').css('top',-50)
        },
        resize: function(){
            var self = this;
            // 如果没有数据，直接退出
            if(self.get('gridData.rows.length') <= 0) { return false};
            // 判断当前是卡片还是列表视图
            var type = self.get('viewType');
            // 列表
            if(type == 1){
                // 遍历所有列的宽度，重置table的宽度
                var contW = 0;
                $('.tableBody .tableList th').each(function(){
                    var $thisW = $(this).outerWidth();
                    // 最后一个空列处理
                    if($(this).index() == $('.tableBody .tableList th').length - 1){
                        if(contW < $('.tableBody').outerWidth() ){
                            $thisW = $('.tableBody').outerWidth() - contW - 1;
                        }else {
                            $thisW = 10;
                        }
                    }
                    contW = contW + $thisW;
                })
                $('.tableBody .tableList').width(contW);
                $('.tableHead .tableList').width(contW);
            }
            // 卡片
            if(type == 2){
                // 根据屏幕尺寸微调卡片宽度
                var $list = $('.cardList');
                var $item = $('.cardList .item');
                var $card = $('.cardList .item .card');
                // 如果卡片标注了是block样式，则退出不处理
                if($card.hasClass('block')){
                    self.set('cardBlock', true);
                    $card.removeAttr('style');
                    return false;
                }
                // 如果有卡片，且卡片设置了宽度数值，则开始处理
                // 第一次执行时，拿到卡片的原始宽度存起来
                if(!self.get('itemWidth')){
                    var itemW = $card.outerWidth();
                    self.set('itemWidth', itemW);
                }else {
                    var itemW = self.get('itemWidth');
                }
                $card.removeAttr('style');
                // itemW = itemW + 20;
                var boxW = $list.outerWidth();
                var itemNum = parseInt(boxW/(itemW+20));
                var space = boxW % (itemW+20);
                // 如果多出来的宽度还没有item一半宽，就平分给每一个item加宽
                if(space < itemW/1.2){
                    var offset = (space / itemNum) + itemW - 1;
                }else {
                    var offset = boxW / (itemNum+1) - 21;
                }
                $item.width(offset);
            }

        },
        // 固定列表模式的表头
        fixTableHead: function(){
            $('.listBody .cardList').removeAttr('style');
            if(this.get('viewType') == 1){
                $('.listBody .tableHead').css('top', $('.listBody').scrollTop())
            }
        },
        // 为父组件提供的方法
        // 设置视图模式
        setViewType: function(num){
            var self = this;
            this.set('viewType', num);
            this.nextTick(function(){
                self.resize();
                return num;
            })
        },
        // 使用初始条件重置数据
        reload: function(){
            var self = this;
            self.set('gridChecked', []);
            self.set('states.curPage', 0);
            self.getData(1);
        },
        // 在本地数据中删除多条记录，供批量删除成功时调用
        delDoms: function(id){
            console.log(id);
            // 将1个或多个id字符串重新组装为一个数组
            var ids = [];
            if(Yox.is.string(id)){
                ids = id.split(',')
            }
            if(Yox.is.number(id)){
                ids.push(id);
            }
            // 批量处理ids
            for(var i=0; i<ids.length; i++){
                // 遍历本地数据，查找ID对应的记录并删除
                var list = self.get('gridData.rows');
                for(var o=0; o<list.length; o++){
                    if(list[o].id == ids[i]){
                        self.removeAt('gridData.rows', o);
                        var newtotal = self.get('gridData.total') - 1;
                        self.set('gridData.total', newtotal);
                    }
                }
            }
            // 清空已选择
            self.set('gridChecked', []);
            // 如果当前页面删光了，尝试获取一下更多数据
            if(self.get('gridData.rows').length <= 0){
                self.set('states.curPage', 0);
                self.getData(1);
            }
        },
        // 获取当前已选中的数据记录，返回一个数据
        getSelected: function(){
            var indexs = this.get('gridChecked');
            var list = this.get('gridData.rows');
            var result = [];
            // 为每一次已选的index，获取到相应的数据
            for(var i=0; i<indexs.length; i++){
                result.push(this.get('gridData.rows.' + indexs[i]))
            }
            return result;
        }
    },
    events: {
        submit:function(){
            layer.msg('默认submit');
            return false;
        }
    },
    computed: {
        // 全选
        allChecked: {
            deps: ['gridData', 'gridData.rows' , 'gridData.rows.*.checked' ],
            get: function () {
                var list = this.get('gridData.rows');
                for (var i = 0, len = list.length; i < len; i++) {
                    if (!list[i].checked) {
                        return false;
                    }
                }
                return len > 0;
            },
            set: function (value) {
                var list = this.get('gridData.rows');
                for (var i = 0, len = list.length; i < len; i++) {
                    this.set('gridData.rows.' + i + '.checked', value)
                }
            }
        },
        // 已选择的ID数组
        gridChecked: {
            deps: ['gridData','gridData.rows', 'gridData.rows.*.checked' ],
            get: function(){
                var result = [];
                var list = this.get('gridData.rows');
                for(var i=0; i<list.length; i++){
                    if(list[i].checked){
                        // 为了方便向外部暴露数据，这里只存index，批量操作也需要手动根据index获取详细数据
                        result.push(i);
                    }
                }
                return result;
            },
            set: function (value) {
                var self = this;
                var list = self.get('gridData.rows');
                for (var i=0; i<list.length; i++) {
                    var defaultValue = false;
                    var thisID = list[i].id;
                    for(var o=0; o<value.length; o++){
                        if(value[o] == thisID){
                            defaultValue = true;
                        }
                    }
                    self.set('gridData.rows.'+i+'.checked', defaultValue)
                }
            }
        }
    },
    filters: {
        
    },
    watchers: {
        "gridData.rows": {
            watcher: function(newValue){
                this.resize();
            },
            sync: true
        },
        "viewType": {
            watcher: function(newValue){
                this.fire('viewTypeChange', {
                    value: newValue
                })
            },
            sync: true
        },
        "gridChecked": {
            watcher: function(newValue){
                this.fire('selected', {
                    value: newValue
                })
            },
            sync: true
        }
    },
    afterMount: function(){
        var self = this;
        // 默认获取数据
        self.getData(1);

        // resize时重置尺寸
        self.resize();
        Yox.dom.on(window, 'resize', function(){
            self.resize();
        })
    }
};